<template>
    <div class="flex flex-wrap">
        <el-card
            class="cursor-pointer m-20"
            style="flex: 0 0 30%;"
            shadow="hover"
            v-for="item in project"
            :key="item.name"
            @click="open(item.href, true)"
        >
            <div class="flex column">
                <div class="flex a-center">
                    <component
                        :is="item.logo"
                        :class="['h-30', item.color, {'w-30': item.title !== 'element-plus'}]"
                    />
                    <span class="ml-10 bold">{{item.title}}</span>
                </div>
                <p class="color-light mt-10">{{item.desc}}</p>
                <span class="text-right">{{item.name}}</span>
            </div>
        </el-card>
        <el-card
            class="m-20"
            style="flex: 0 0 30%;"
            shadow="hover"
            v-for="(value,name) in chart"
            :key="name"
        >
            <component :is="value" />
        </el-card>
    </div>
</template>

<script setup lang="ts">
import type { Component } from 'vue'
import { SvgIcon, useRouter } from '@/utils'
import { Liquid, LinePlot, PiePlot } from './components'

type Chart = {
    [key: string]: Component
}
const { open } = useRouter()
const chart: Chart = {
    Liquid,
    LinePlot,
    PiePlot,
}
const project = [
    {
        logo: SvgIcon('home/vue'),
        title: 'Vue',
        desc: '一套用于构建用户界面的渐进式框架',
        name: '尤雨溪 - Evan You',
        href: 'https://v3.cn.vuejs.org/',
    },
    {
        logo: SvgIcon('home/typescript'),
        color: 'color-blue',
        title: 'Typescript',
        desc: 'JavaScript类型的超集，它可以编译成纯JavaScript',
        name: '微软 - Microsoft',
        href: 'https://www.tslang.cn/docs/release-notes/typescript-3.1.html',
    },
    {
        logo: SvgIcon('home/vite'),
        title: 'Vite',
        desc: '下一代前端开发与构建工具',
        name: '尤雨溪 - Evan You',
        href: 'https://vitejs.cn/',
    },
    {
        logo: SvgIcon('home/pinia'),
        title: 'Pinia',
        desc: 'vue状态管理框架，支持vue2、vue3',
        name: 'Posva',
        href: 'https://pinia.vuejs.org/',
    },
    {
        logo: SvgIcon('home/element-plus'),
        title: 'element-plus',
        desc: 'vue3构建全新UI库',
        name: 'element-plus',
        href: 'https://element-plus.org/zh-CN/guide/quickstart.html',
    },
    {
        logo: SvgIcon('home/wind'),
        color: 'color-blue',
        title: 'WindiCSS',
        desc: '下一代实用优先的CSS框架',
        name: 'WindiCSS',
        href: 'https://windicss.org/utilities/animations/animation.html',
    },
]
</script>

<style scoped>
</style>
